<template>
    <div>
                <Form inline>
                 <FormItem>
                <Select v-width="280" v-model="formItem.select" multiple :max-tag-count="2">
                <Option value="2019-05-03">2019-05-03</Option>
                <Option value="2019-04-06">2019-04-06</Option>
                <Option value="2019-03-21">2019-03-21</Option>
                <Option value="2019-02-21">2019-02-21</Option>
            </Select>
                </FormItem>
                <FormItem>
                    <RadioGroup v-model="order">
                        <Radio label="order">顺序时间</Radio>
                        <Radio label="Reverse">倒序时间</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem class="ivu-fr">
                    <ButtonGroup v-if="imgEdit">
                        <Button>本地图片</Button>
                        <Button type="primary" @click="handleImgEdit">编辑</Button>
                    </ButtonGroup>
                    <ButtonGroup v-else>
                        <Button>本地图片</Button>
                        <Button @click="handleImgCancel">取消</Button>
                        <Button type="error" :disabled="single? false : true">删除</Button>
                        <Button type="primary" @click="handleImgCancel">保存</Button>
                    </ButtonGroup>
                </FormItem>
            </Form>
        <Row :gutter="24">
           <div v-height="118" v-if="loading" style="position:relative">
                <Spin size="large" fix></Spin>
           </div>
            <Col
                :xl="compact ? 12 : 8"
                :lg="compact ? 12 : 8"
                :md="12"
                :sm="12"
                :xs="24"
                v-for="(item, index) in projectList"
                :key="index"
                class="ivu-mb"
            >
                <Card
                    :bordered="bordered"
                    dis-hover
                    :padding="0"
                    class="search-search-projects-item"
                >
                    <img :src="item.cover" class="search-search-projects-item-cover" />
                    <DescriptionList :col="1">
                        <Description term="2019-10-08" class="ivu-text-right ivu-mt-8">
                            <span v-if="imgEdit">头部</span>
                            <div v-else>
                                <Checkbox v-model="single" class="ivu-mr-16"></Checkbox>
                                <Select v-model="model1" v-width="100">
                                    <Option
                                        v-for="item in cityList"
                                        :value="item.value"
                                        :key="item.value"
                                    >{{ item.label }}</Option>
                                </Select>
                                </div>
                        </Description>
                    </DescriptionList>
                </Card>
            </Col>
        </Row>
    </div>
</template>
    </div>
</template>
<script>
    import dataList from './data';
    export default {
        name: 'detailed-Images',
        props: {
            compact: {
                type: Boolean,
                default: false
            },
            bordered: {
                type: Boolean,
                default: false
            }
        },
        data () {
            return {
                loading: false,
                single: false,
                imgEdit: true,
                model1: '',
                type: [],
                order: 'order',
                projectList: [],
                formItem: [
                    {
                        select: ''
                    }
                ],
                cityList: [
                    {
                        value: '头部',
                        label: '头部'
                    },
                    {
                        value: '足部',
                        label: '足部'
                    },
                    {
                        value: '手部',
                        label: '手部'
                    },
                    {
                        value: '脸部',
                        label: '脸部'
                    }
                ]
            }
        },
        methods: {
            getProject () {
                this.loading = true;
                setTimeout(() => {
                    this.projectList = dataList;
                    this.loading = false;
                }, 1000);
            },
            handleImgEdit () {
                this.imgEdit = false
            },
            handleImgCancel () {
                this.imgEdit = true
            }
        },
        mounted () {
            this.getProject();
        }
    }
</script>
<style lang="less">
.search-search-projects {
    &-item {
        &-cover {
            width: 100%;
            border-radius: 4px 4px 0 0;
        }
        &-desc {
            display: -webkit-box;
            height: 40px;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        &-extra {
            span {
                display: inline-block;
                color: #808695;
                vertical-align: middle;
                margin-left: 10px;
            }
        }
    }
}
</style>
